<template>
    <div class="text_extension">
        <div class="text-box">
            <div class="text-title" id="text-title">{{title}}</div>
            <div class="text-info" id="text-info">
                <div class="text-cover"><img :src="cover" alt=""></div>
                <div class="text-info-item" v-for="(item,index) in novelInfo" :key="index">
                    <section class="item-title" style="  width: 230px;
                        height: 40px;
                        line-height: 40px;
                        background: #F96E57;
                        color: white;
                        text-align: center;
                        font-weight: 700;
                        position: relative;
                        overflow: hidden;">
                        <section style=" position: absolute;
                        width: 34px;
                        height: 30px;
                        background: white;
                        transform: rotate(45deg);
                        top: -14px;
                        right: -20px;"></section>
                        <section style="position: absolute;
                        width: 34px;
                        height: 30px;
                        background: white;
                        transform: rotate(45deg);
                        bottom: -17px;
                        right: -20px;"></section>
                        {{item.title}}
                    </section>
                    <section class="item-text">
                        <section class="corner one"></section>
                        <section class="corner two"></section>
                        <section class="corner three"></section>
                        <section class="corner four"></section>
                        <img :src="item.path" alt="">
                    </section>
                </div>
                <div class="text-guide" v-show="oneShow">
                    <p> 未完待续……</p>
                    <p> 微信篇幅有限，后续内容和情节更加精彩！</p>
                    <p> 点击下方【阅读原文】继续阅读哦~~~</p>
                    <img :src="dropdown" alt="">
                </div>
            </div>
        </div>
        <div class="foot-btn">
            <div class="max-width foot-btn-box">
                <el-dropdown trigger="click" @command="handleCommand1">
                    <span class="el-dropdown-link">文案标题<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item,index) in titleData" :key="index" :command="item.content">
                            {{item.content}}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown trigger="click" @command="handleCommand2">
                    <span class="el-dropdown-link">文案封面<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item,index) in coverData" :key="index" :command="item.content">
                            <img :src="item.content" alt="" width="100">
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown trigger="click" @command="handleCommand3">
                    <span class="el-dropdown-link">原文引导章节<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item,index) in dropdownData" :key="index" :command="item.content">
                            <img :src="item.content" alt="" width="100">
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown trigger="click" @command="handleCommand4">
                    <span class="el-dropdown-link">书籍章节<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item,index) in chaptersData" :key="index" :command="item.id">
                            {{item.title}}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown trigger="click" @command="handleCommand5">
                    <span class="el-dropdown-link">复制<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">复制标题</el-dropdown-item>
                        <el-dropdown-item command="2">复制正文</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button type="primary" size="small" @click="add">生成链接</el-button>
            </div>
        </div>
        <el-dialog title="新增" width="30%" :visible.sync="visible">
            <el-row :gutter="20">
                <el-col :span="20">
                    <el-form ref="form" :model="dataForm" label-width="100" size="small">
                        <el-form-item label="小说名称">
                            <el-input v-model="dataForm.title" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="推广名称">
                            <el-input v-model="dataForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="小说章节">
                            <el-select v-model="dataForm.chaps" placeholder="选择章节" style="width: 100%" disabled>
                                <el-option :label="item.title" :value="item.id" v-for="(item,index) in chaptersData"
                                           :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="强制关注章节">
                            <el-input v-model="dataForm.subchaps"></el-input>
                            <span class="input_hint">强制关注章节数不能大于最大免费章节数,留空或者填0则默认不强制关注，推荐强关章节第7章，建议强制关注章节为第5章~第8章</span>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="dataForm.msg"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "text_extension",
    data() {
      return {
        titleData: [],
        coverData: [],
        dropdownData: [],
        chaptersData: [],
        anime_title: '',
        anime_id: '',
        chaps: '',
        type: 'image',
        novelInfo: '',
        title: '',
        cover: '',
        dropdown: '',
        oneShow: false,
        dataForm: {
          anid: '',
          btype: 2,
          chaps: '',
          name: '',
          subchaps: '',
          msg: '',
          title: '',
        },
        visible: false
      }
    },
    created() {
      this.anime_id = this.$route.query.anime_id;
      this.chaps = this.$route.query.chaps;
      this.anime_title = this.$route.query.anime_title;
      this.getArticle();
      this.getTitle();
      this.getCover();
      this.getDropdown();
      this.getChapters();
    },
    methods: {
      getArticle() {
        let data = {
          anime_id: this.anime_id,
          chaps: this.chaps,
          type: this.type,
        };
        this.$axios.post("admin/generalize/article", data).then((res) => {
          console.log(res.data);
          this.novelInfo = res.data;
        });
      },
      getTitle() {
        let data = {
          type: 'title',
          page_size: '99999'
        };
        this.$axios.get("admin/material", data).then((res) => {
          this.titleData = res.data.list;
          this.title = this.titleData[0].content;
        });
      },
      getCover() {
        let data = {
          type: 'cover',
          page_size: '99999'
        };
        this.$axios.get("admin/material", data).then((res) => {
          this.coverData = res.data.list;
          this.cover = this.coverData[0].content;
        });
      },
      getDropdown() {
        let data = {
          type: 'dropdown',
          page_size: '99999'
        };
        this.$axios.get("admin/material", data).then((res) => {
          this.dropdownData = res.data.list;
          this.dropdown = this.dropdownData[0].content;
        });
      },
      getChapters() {
        let data = {
          anid: this.anime_id,
          page: '1',
          page_size: '10',
        };
        this.$axios.post("admin/chapter/index", data).then((res) => {
          this.chaptersData = res.data.list;
          this.oneShow = true;
        });
      },
      add() {
        this.dataForm.anid = this.anime_id;
        this.dataForm.title = this.anime_title;
        this.dataForm.chaps = +this.chaps;
        this.visible = true;
      },
      dialogAffirm() {
        this.$axios.post("admin/generalize", this.dataForm).then((res) => {
          this.$message.success('添加成功');
          this.visible = false;
        });
      },
      // 选中标题
      handleCommand1(title) {
        this.title = title;
      },
      handleCommand2(cover) {
        this.cover = cover;
      },
      handleCommand3(dropdown) {
        this.dropdown = dropdown;
      },
      //选中章节id
      handleCommand4(id) {
        this.chaps = id;
        this.getArticle()
      },
      //选中复制内容
      handleCommand5(type) {
        if (type == 1) {
          var node = document.getElementById('text-title');
          var range;
          if (document.body.createTextRange) { // IE
            // 用于表示文档中特定的一段文本，例如在按住鼠标选中页面上的内容时，创建出的就是一个较为典型的 TextRange。
            range = document.body.createTextRange();
            range.moveToElementText(node); //使区域包含指定元素的文本。只能用于 Element 对象。
            range.select();
            document.execCommand('copy');
          } else if (window.getSelection) {
            // Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。
            var selection = window.getSelection();
            range = document.createRange();
            range.selectNodeContents(node); //使 Range 包含某个节点的内容。
            selection.removeAllRanges(); //将所有的区域都从选区中移除。
            selection.addRange(range); //一个区域（Range）对象将被加入选区。
            document.execCommand('copy');
          }
          this.$message.success('复制成功')
        } else if (type == 2) {
          var node = document.getElementById('text-info');
          var range;
          if (document.body.createTextRange) { // IE
            // 用于表示文档中特定的一段文本，例如在按住鼠标选中页面上的内容时，创建出的就是一个较为典型的 TextRange。
            range = document.body.createTextRange();
            range.moveToElementText(node); //使区域包含指定元素的文本。只能用于 Element 对象。
            range.select();
            document.execCommand('copy');
          } else if (window.getSelection) {
            // Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。
            var selection = window.getSelection();
            range = document.createRange();
            range.selectNodeContents(node); //使 Range 包含某个节点的内容。
            selection.removeAllRanges(); //将所有的区域都从选区中移除。
            selection.addRange(range); //一个区域（Range）对象将被加入选区。
            document.execCommand('copy');
            this.$message.success('复制成功')
          }
        }
      },
    }
  }
</script>

<style scoped lang="less">
    ::selection {
        background: #ffffff;
    }

    .text_extension {
        padding-top: 20px;

        .max-width {
            width: 1200px;
            margin: 0 auto;
        }

        .text-box {
            max-width: 500px;
            width: 100%;
            margin: 0 auto;
            padding-bottom: 100px;

            .text-title {
                margin-bottom: 10px;
                line-height: 1.4;
                font-weight: 400;
                font-size: 24px;
            }

            .text-cover {
                margin: 20px 0;

                img {
                    width: 100%;
                }
            }

            .text-info {
                .text-info-item {
                    margin-bottom: 20px;

                    .item-title {
                        width: 230px;
                        height: 40px;
                        line-height: 40px;
                        background: #F96E57;
                        color: white;
                        text-align: center;
                        font-weight: 700;
                        position: relative;
                        overflow: hidden;
                    }

                    .item-title:after {
                        position: absolute;
                        content: '';
                        width: 34px;
                        height: 30px;
                        background: white;
                        transform: rotate(45deg);
                        top: -14px;
                        right: -20px;
                    }

                    .item-title:before {
                        position: absolute;
                        content: '';
                        width: 34px;
                        height: 30px;
                        background: white;
                        transform: rotate(45deg);
                        bottom: -17px;
                        right: -20px;
                    }

                    .item-text {
                        margin: 20px 0;
                        padding: 10px;
                        position: relative;

                        .corner {
                            width: 30px;
                            height: 30px;
                            position: absolute;
                        }

                        .corner.one {
                            left: -5px;
                            top: -5px;
                            border-top: 5px solid #F96E57;
                            border-left: 5px solid #F96E57;
                        }

                        .corner.two {
                            right: -5px;
                            top: -5px;
                            border-top: 5px solid #F96E57;
                            border-right: 5px solid #F96E57;
                        }

                        .corner.three {
                            left: -5px;
                            bottom: -5px;
                            border-bottom: 5px solid #F96E57;
                            border-left: 5px solid #F96E57;
                        }

                        .corner.four {
                            right: -5px;
                            bottom: -5px;
                            border-bottom: 5px solid #F96E57;
                            border-right: 5px solid #F96E57;
                        }

                        img {
                            width: 100%;
                        }
                    }
                }
            }

            .text-guide {
                p {
                    color: #F96E57;
                    font-weight: 700;
                    line-height: 30px;
                    font-size: 20px;
                }

                img {
                    width: 100%;
                }
            }
        }

        .foot-btn {
            width: 100%;
            height: 50px;
            position: fixed;
            left: 0;
            bottom: 0;
            background: #F8F8F8;

            .foot-btn-box {
                display: flex;
                justify-content: space-around;
                height: 50px;
                align-items: center;
            }
        }
    }

</style>